<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="6" :xl="6" :style="{ marginBottom: '24px' }">
        <a-card>
          <div slot="title">
            {{ $t('dataKf.xxlb') }}
          </div>
          <div class="table-operator">
          </div>
          <div>
            <ul class="msg-list-box">
              <li @click="handleClickMsgItem(item, index)" v-for="(item,index) in msgList">
                <a-badge v-if="item.cnt>0" :count="item.cnt">
                </a-badge>
                <dl>
                  <dt>{{item.from_user}}</dt>
<!--                  <dd>{{ $t('dataKf.hd') }}</dd>-->
                </dl>
              </li>
            </ul>
            <div v-if="msgList.length==0">
              {{ $t('dataKf.zwsj') }}
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :sm="24" :md="18" :xl="18" :style="{ marginBottom: '24px' }">
        <a-card>
          <div slot="title">
            {{$t('dataKf.xxnr')}} <span style="color:red;">{{curr_user?curr_user:$t('dataKf.qxzlxr')}}</span>
          </div>
          <div class="table-operator">
          </div>
          <div>
            <div v-if="loading" style="text-align: center;">
              <a-spin>
                <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
              </a-spin>
            </div>
            <ul class="his-list">
              <li v-for="(item, index) in his">
                <div :class="item.is_self?'self':'no_self'" class="msg-row">
                  <template v-if="item.is_self">
                    <div>
                      <template v-if="item.msg_type==0">
                        {{item.content}}
                      </template>
                      <template v-else>
                        <img @click="handleClickReview(item.content)" style="max-width: 150px;max-height: 150px;" :src="item.content" alt="">
                      </template>
                      <span class="time_at">{{item.is_read?'✔✔':'✔'}} {{item.when}}</span>
                    </div>
                    <div>
                      <img src="/static/img/kf2.png" alt="">
                    </div>
                  </template>
                  <template v-else>
                    <div>
                      <img src="/static/headphoto/1.4.jpg" alt="">
                    </div>
                    <div>
                      <template v-if="item.msg_type==0">
                        {{item.content}}
                      </template>
                      <template v-else>
                        <img @click="handleClickReview(item.content)" style="max-width: 150px;max-height: 150px;" :src="item.content" alt="">
                      </template>
                      <span class="time_at">{{item.is_read?'✔✔':'✔'}} {{item.when}}</span>
                    </div>
                  </template>
                </div>
              </li>
            </ul>
            <a-form>
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                :label="this.$t('dataKf.hfxx')"
              >
                <a-textarea @keyup.enter="handleClickSubmit" v-model="text" :rows="3" />
              </a-form-item>
              <a-form-item
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
                :label="this.$t('dataKf.bjcz')"
              >
                <input @change="handleChangeImg" accept="image/jpeg,image/png" ref="upload_img" style="display: none" type="file">
                <img @click="handleClickImg" style="width:30px;cursor: pointer;" title="$t('dataKf.fstp')" src="/static/img/pic.png" alt="">
              </a-form-item>
              <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
                <audio id="audio-tips" src="/static/sounds/msg.mp3" />
                <a-button :loading="loading" type="primary"  @click="handleClickSubmit">
                  {{ $t('dataKf.fs') }}
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </a-card>
      </a-col>
    </a-row>
    <DialogImg :img_url="curr_img_url" :is_show="curr_img_show"/>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import DialogImg from '../../components/DialogImg'

export default {
  name: 'Analysis',
  mixins: [mixinDevice],
  components: {
    DialogImg
  },
  data () {
    return {
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
      },
      formTailLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 20, offset: 4 },
      },
      loading: false,
      user: {},
      data: '',
      msgList: [

      ],
      his: [
        // {
        //   from_user: this.$t('dataKf.dhl'),
        //   to_user:this.$t('dataKf.xbt'),
        //   content: '你好,在吗',
        //   is_read: 1,
        //   is_self: 0,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.dhl'),
        //   to_user:this.$t('dataKf.xbt'),
        //   content: this.$t('dataKf.wycz'),
        //   is_read: 1,
        //   is_self: 0,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.dhl'),
        //   to_user:this.$t('dataKf.xbt'),
        //   content: '3000块钱',
        //   is_read: 1,
        //   is_self: 0,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.dhl'),
        //   to_user:this.$t('dataKf.xbt'),
        //   content: this.$t('dataKf.yhm'),
        //   is_read: 1,
        //   is_self: 0,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.xbt'),
        //   to_user:this.$t('dataKf.dhl'),
        //   content: this.$t('dataKf.yd'),
        //   is_read: 1,
        //   is_self: 1,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.dhl'),
        //   to_user:this.$t('dataKf.xbt'),
        //   content: this.$t('dataKf.kfh'),
        //   is_read: 0,
        //   is_self: 0,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.xbt'),
        //   to_user:this.$t('dataKf.dhl'),
        //   content: this.$t('dataKf.hdxfk'),
        //   is_read: 0,
        //   is_self: 1,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.dhl'),
        //   to_user:this.$t('dataKf.xbt'),
        //   content: this.$t('dataKf.yfk'),
        //   is_read: 0,
        //   is_self: 0,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.xbt'),
        //   to_user:this.$t('dataKf.dhl'),
        //   content: this.$t('dataKf.yfh'),
        //   is_read: 0,
        //   is_self: 1,
        //   created_at: '22秒前'
        // },
        // {
        //   from_user: this.$t('dataKf.dhl'),
        //   to_user:this.$t('dataKf.xbt'),
        //   content: 'ok',
        //   is_read: 0,
        //   is_self: 0,
        //   created_at: '22秒前'
        // }
      ],
      text: '',
      curr_img_url: '',
      curr_img_show: false,
      curr_id: 0,
      curr_user: ''
    }
  },
  sockets: {
    // 查看socket是否渲染成功
    connect () {
      console.log(this.$t('dataKf.ljcg'))
      if(this.user.id != undefined){
        this.$socket.emit('login', 'daichong_' + this.user.id)
      }
    },
    disconnect () {
      console.log(this.$t('dataKf.dklj'))
    },
    reconnect () {
      console.log(this.$t('dataKf.zxlj'))
    }
  },
  beforeDestroy () {
    this.$socket.emit('disconnect', 1)
  },
  methods: {
    handleClickImg(){
      this.$refs.upload_img.click();
    },
    handleClickReview (url) {
      this.curr_img_url = url
      this.curr_img_show = !this.curr_img_show
    },
    initServer () {
      this.$socket.emit('connect', 1)
      this.sockets.subscribe('new_msg', (msg) => {
        this.playAutio()
        msg = msg.replace(/&quot;/g, '"')
        console.log(msg)
        let data = JSON.parse(msg)
        if (data.code == 0) {
          this.$message.info(data.msg)
        }
        if (data.from_uid == this.curr_id) {
          this.getMsg(data.msg_id)
        } else {
          this.getData()
        }
      })
    },
    handleClickMsgItem (item, index) {
      this.curr_user = item.from_user
      this.curr_id = item.id
      this.getData2()
      this.msgList[index].cnt = 0
    },
    handleChangeImg (e) {
      let file = e.target.files[0]
      this.loading = true
      let param = new FormData()
      // to_uid: this.curr_id,
      // to_user: this.curr_user,
      // content: this.text,
      // to_type: 'daichong',
      // param.append("username",this.data.username)
      param.append('to_uid', this.curr_id)
      param.append('content', file)
      param.append('msg_type', 1)

      this.$http.post('/kf/send_msg', param).then((res) => {
        if (res.code === 0) {
          this.$message.success(res.msg)
          this.his.push(res.data)
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.message)
      }).then(() => {
        this.loading = false
      })
    },
    getUser () {
      this.loading = true
      let url = '/user/info'
      this.$http.get(url).then(res => {
        this.user = res
        this.initServer()
      }).catch(err => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getData () {
      this.loading = true
      let url = '/kf/get_kf_msg_list'
      this.$http.get(url).then(res => {
        this.msgList = res
      }).catch(err => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getData2 () {
      this.loading = true
      let url = '/kf/get_kf_msg_detail?uid=' + this.curr_id
      this.$http.get(url).then(res => {
        this.his = res
        this.readMsgs()
      }).catch(err => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    getMsg (id) {
      this.loading = true
      let url = '/kf/get_msg?id=' + id
      this.$http.get(url).then(res => {
        if(res){
          this.his.push(res)
        }
      }).catch(err => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },
    readMsgs () {
      let url = '/kf/read_msgs'
      this.$http.post(url, this.$qs.stringify({
        uid: this.curr_id
      })).then(res => {
      }).catch(err => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      }).then(() => {
      })
    },
    playAutio () {
      let audio = document.getElementById('audio-tips')
      if (audio) {
        audio.play()
      }
    },
    onSearch (val) {
      this.mInfo = ''
      this.loading = true
      this.$http.get("/user/m_info?username="+val).then(res => {
        if (res.code == 0) {
          this.mInfo = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    },

    handleClickSubmit () {
      if (this.text.length < 2) {
        return
      }
      this.loading = true
      this.$http.post('/kf/send_msg', this.$qs.stringify({
        to_uid: this.curr_id,
        content: this.text,
        msg_type: 0
      })).then(res => {
        if (res.code === 0) {
          this.text = ''
          this.$message.info('已发送')
          this.his.push(res.data)
        } else {
          this.$notification.error({
            message: '失败',
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: '失败',
          description: err.message
        })
      }).then(() => {
        this.loading = false
      })
    }
  },
  mounted () {
    this.getUser()
    this.getData()
  }
}
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);
    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0,0,0,.45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }
  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }
  .msg-list-box li{
    border-bottom: thin dashed #efefef;
    cursor: pointer;
  }
  .msg-list-box li span{
    float: right;
    position: relative;
  }
  .his-list{
    padding-bottom:1rem;
    overflow-y: scroll;
  }
  .his-list li .msg-row{
    overflow: hidden;
    text-align: left;
    padding: 0.1rem 0.3rem;
    margin: 0.2rem;
    display: flex;
    flex-wrap: nowrap;
  }
  .his-list li .msg-row div{
    position: relative;
  }
  .his-list li .msg-row.no_self div:first-child{
    flex: 1;
  }
  .his-list li .msg-row.no_self div:last-child{
    padding-left: 0.3rem;
    border:thin solid #ccc;
    border-radius: 6px;
    background: #fff;
    flex: 10;
    margin-left: 10px;
  }
  .his-list li .msg-row.self div:last-child{
    flex: 1;
    padding-left: 0.3rem;
  }
  .his-list li .msg-row.self div:first-child{
    border:thin solid #ccc;
    border-radius: 6px;
    background: #fff;
    flex: 10;
    padding-left:10px;
  }
  .his-list li .msg-row.no_self div:first-child img{
    width:100%;
    border-radius: 50%;
    border:thin solid #ccc;
    padding:0.1rem;
    background: #fff;
  }
  .his-list li .msg-row.self div:last-child img{
    width:100%;
    border-radius: 50%;
    border:thin solid #ccc;
    padding:0.1rem;
    background: #fff;
  }
  .time_at{
    position: absolute;
    bottom: 0;
    right: 0.1rem;
    color: #777;
  }
</style>
